<template>
   <el-form :model="form" label-width="auto" style="max-width: 1000px">
    <el-form-item>
      <el-button type="primary" @click="onSubmit">修改</el-button>
      <el-button @click="onCancel">取消</el-button>
    </el-form-item>
    <el-form-item label="API">
      <el-input v-model="form.api" />
    </el-form-item>
    <el-form-item label="备注">
      <el-input v-model="form.remark" />
    </el-form-item>
    <el-form-item label="API 返回内容">
      <el-input v-model="form.content" type="textarea" :rows="50"/>
    </el-form-item>
  
  </el-form>
</template>
<script>
import { reactive } from 'vue'
import { ElMessage, ElLoading  } from 'element-plus'

export default {
    name: 'ApiContentModifyComponent',  
    mounted() {
       var id = this.$route.params.id
       console.log("id:" + id)
       this.form.id = id
       this.getDataById(id)
    },
    methods: {     
      onCancel() {
        this.$router.back()
      },
      getDataById(id) {
        const loading = ElLoading.service({
          lock: true,
          text: '加载中',
          background: 'rgba(0, 0, 0, 0.7)',
        })
        this.$http.get("/api/list/get?id=" + id).then((res)=>{
          var data = res.data
          if (data.code == 200) {
            this.form.api = data.data["api"]
            this.form.content = data.data["content"]
            this.form.remark = data.data["remark"]
          } else {
            ElMessage({
                  type: 'failed',
                  message: '获取失败 ' + data.msg,
                })
          }
          loading.close()
        }, (error)=> {
          ElMessage({
                  type: 'error',
                  message: '获取详情失败 ' + error,
            })
        })
      },
      onSubmit() {
        const loading = ElLoading.service({
          lock: true,
          text: '处理中',
          background: 'rgba(0, 0, 0, 0.7)',
        })

        this.$http.post("/api/list/modify", {
          id: this.form.id,
          api:this.form.api,
          content:this.form.content,
          remark:this.form.remark,
        }).then((res)=>{
          if (res.data) {
            var resp = res.data
            if (resp.code == 200) {
                ElMessage({
                  type: 'success',
                  message: '修改成功',
                })
                this.$router.replace("/api-list")
            } else {
              ElMessage({
                  type: 'failed',
                  message: '修改失败',
                })
            }
          }
          loading.close()
        }, (error)=>{
          ElMessage({
                  type: 'error',
                  message: '修改详情失败 ' + error,
            })
        });
      }
    },
    data() {
      // do not use same name with ref
      const form = reactive({
        id:0,
        api: '',
        content: '',       
        remark:'',
      })
      return {
        form
      }
    }
}
</script>
<style scoped>

</style>